<template>
    <div>
        <a-modal
            :closable="false"
            :footer="null"
            :keyboard="false"
            :maskClosable="false"
            title="关于我"
            v-model:open="isVisible1">
            123
        <!-- <a-upload
          :list-type="listType"
          :multiple="true"
          :file-list="fileList"
          :before-upload="beforeUpload"
          :on-change="onChange"
          :max-count="maxImages"
          :custom-request="customRequest"
        >
          <a-button>
            <a-icon type="upload" /> Click to Upload
          </a-button>
        </a-upload>
        <template #footer>
          <a-button key="back" @click="handleCancel"> Cancel </a-button>
          <a-button key="submit" type="primary" :loading="isLoading" @click="handleSubmit">
            Save
          </a-button>
        </template> -->
      </a-modal>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Modal, Upload, Button, Icon } from 'ant-design-vue';

const fileList = ref([]); // 上传的文件列表
const isLoading = ref(false);
const isVisible1 = ref(true); // 控制模态框的显示
const listType = 'picture-card';
const maxImages = 5;

const beforeUpload = (file: File) => {
  if (fileList.value.length >= maxImages) {
    alert(`You can only upload up to ${maxImages} images.`);
    return false;
  }
  return true;
};

const onChange = ({ fileList: newFileList }) => {
  fileList.value = newFileList;
};

const customRequest = () => {}; // 你可以在此处实现文件上传的逻辑

const handleOk = () => {
  // 通常这里会触发保存逻辑，但因为我们有 handleSubmit，这里可以不实现
};

const handleCancel = () => {
  fileList.value = [];
  isVisible1.value = false;
};

const handleSubmit = () => {
  if (fileList.value.length === 0) {
    alert('Please upload at least one image.');
    return;
  }
  isLoading.value = true;
  // 模拟异步操作，实际中应替换为真实的上传逻辑
  setTimeout(() => {
    isLoading.value = false;
    // 这里可以触发上传后的逻辑，例如关闭模态框
    isVisible1.value = false;
  }, 2000);
};

// 你也可以定义一个方法来打开模态框
const openModal = () => {
  isVisible1.value = true;
};
</script>